<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "@/stores/store.js";
import {toMusicInfoPage} from "@/api/toMusicInfo.js";
const key = ref("")
const router = useRouter()
const route = useRoute()
const musicList = ref([])
const error = ref(false)
const search = (pageNum) => {


  // 搜索的关键字不能为空
  if (key.value.trim() === '') {
    ElMessage.error('搜索的关键字不能为空')
    return
  }

  // 给后端发请求
  const url = `/music/query/music/key?key=${key.value}&pageNum=${pageNum}`
  axios.get(url).then((res)=>{
    if (res.data.flag) {
      musicList.value = res.data.data
    } else {
      error.value = true

      ElMessage.error(res.data.message)
      // ElMessage.error("抱歉 没有找到结果")
    }
  })

}
onMounted(() => {
  key.value = route.query.key
  search(1)
})


</script>

<template>
  <div class="container">
    <div class="song-row grayBg">
      <span class="c1">歌曲</span>
      <span class="c2">歌手</span>
      <span class="c3">专辑</span>
      <span class="c4">时长</span>
    </div>

    <div style="color: black;font-size: 15px" v-for="(item,index) in musicList" :key="index" class="song-row" :class="{grayBg :　index % 2 === 1}">
      <span class="index">{{ index + 1 }}</span>

      <span class="c1 hover" v-html="item.name" @click="toMusicInfoPage(router, item.id, index, null)" style="cursor:pointer;"></span>

      <span class="c2">{{ item.musician }}</span>
      <span class="c3">{{ item.album }}</span>
      <span class="c4">{{ item.duration }}</span>
    </div>

    <div style="text-align: center;margin-top: 60px;" v-if="error">
      <h2>很抱歉，暂时没有找到与<span style="color: #ff5831">“{{ key }}”</span>相关的结果</h2>
      <h2>QQ音乐建议你：请检查输入的关键词是否有误或者过长</h2>
      <h2>或到QQ音乐反馈平台，向我们投诉或提出建议。</h2>
    </div>

  </div>

</template>

<style scoped>
.container {
  font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
}

.grayBg {
  background: rgba(0,0,0,.01);
}

.song-row {
  line-height: 50px;
  color: #999;
  font-size: 14px;
  padding-left: 46px;
  position: relative;
}
.hover:hover {
  color: #e96161;
}
.index {
  position: absolute;
  top: 0;
  left: 10px;
  color: #999;
  width: 36px;
}
h2 {
  font-weight: normal;
  color: #646464;
  height: 40px;
  line-height: 40px;
}
.song-row>span {
  display: inline-block;
}
.c1 {
  width: 504px;
}
.c2 {
  width: 255px;
  padding-left: 15px;
}
.c3 {
  width: 255px;
  padding-left: 15px;
}
.c4 {
  position: absolute;
  top: 0;
  right: 38px;
  width: 50px;
}
</style>
